/* App style sheet */

@import './utils/base.scss';
@import './utils/github-gist.css';


@media (min-width: 1600px) {
	.d-gl-block {
		display: block !important;
	}
}


.category {
	overflow: auto;
	position: fixed;
	left: 0;
	top: 0;
	height: 100%;
	padding: 2rem 1rem 2rem 2rem;
	font-size: 1.35rem;

	> .chapter {
		color: gray;
		text-decoration: none;

		&:hover, &.active {
			color: orange;
		}
	}

}

// content navigation
.navigation {
	overflow: auto;
	position: absolute;
	top: 0;
	right: 0;
	transform: translate(100%, 0);
	padding: 100px 10px 20px;
	font-size: 1rem;

	> div {
		border-left: 2px solid transparent;

		&:hover, &.active {
			color: #2196f3;
			border-color: #2196f3;
			cursor: pointer;
		}
	}

	> .h1 {
		font-size: 2em;
	}

	> .h2 {
		padding-left: .5rem;
		font-size: 1.75em;
	}

	> .h3 {
		padding-left: 1rem;
		font-size: 1.5em;
	}

	> .h4 {
		padding-left: 1.5rem;
		font-size: 1.25em;
	}
}

// book content style
.file-content {
	position: relative;
	padding: 4rem 1rem 6rem 1rem;
	font-size: 1.35rem;
	line-height: 1.8;

	> .file-header {
		padding: 0 .5rem;
		border-bottom: 1px solid #9e9e9e;
	}

	> .file-footer {
		padding: 0 .5rem;
		border-top: 1px solid #9e9e9e;
	}

	h3, h4, h5, h6 {
		padding: .5rem;
		background-color: #e9ecef;
	}

	h1, h2 {
		text-align: center;
	}

	p {
		text-indent: 2em;

		> * {
			text-indent: 0;
		}

		> em {
			margin-right: .5rem;
		}
	}

	ul {
		padding-left: 2em;

		> li {
			list-style-type: disc;

			> ul {
				padding-left: 1em;

				> li {
					list-style-type: circle;
				}
			}

			> p {
				text-indent: 0;
			}
		}

	}

	blockquote {
		padding: .25rem 0 .25rem .5rem;
		margin: 1rem 0;
		background-color: #f8f9fa;
		border-left: 4px solid #2196f3;

		> p:last-child {
			text-indent: 0;
			margin-bottom: 0;
		}
	}

	pre {
		overflow: auto;
		padding: .5rem 0;
		margin: 1rem 0;
		background-color: #f8f9fa;

		> code {
			display: block;
			position: relative;
			padding: 0 0 0 3rem;

			/* line-number */
            &::before {
                content: attr(line-number);
                position: absolute;
                left: 0;
                width: 2.5rem;
                padding-right: .5rem;
                color: #bbb;
                text-align: right;
                border-right: 1px solid #ced4da;
            }
		}
	}

	table {
		width: 100%;
		margin-bottom: 1rem;
		border: 1px solid black;
		background-color: transparent;

		th {
			padding: 0 .75rem;
			border-bottom: 1px solid black;
			border-right: 1px solid black;
			vertical-align: bottom;

			&:last-child {
				border-right: none;
			}
		}

		td {
			padding: 0 .75rem;
			border-top: 1px solid black;
			border-right: 1px solid black;
			vertical-align: top;

			&:last-child {
				border-right: none;
			}
		}
	}

	.note {
		overflow: auto;
		padding: .5rem 1rem;
		margin: 1rem 0;
		border: 1px dashed black;

		> p:last-child {
			margin-bottom: 0;
		}
	}

	.code-file {
		text-align: right;
		margin-bottom: .5rem;

		> span {
			display: inline-block;
			padding: 0 .5rem;
			font-weight: bold;
			border: 1px solid black;
		}
	}

}